<script setup lang="ts">
import { ref, computed } from 'vue'

// 定义温度类型
type TemperatureType = 'celsius' | 'fahrenheit'

// 存储温度值
const celsius = ref<number>(25)
const fahrenheit = ref<number>(77)
const activeType = ref<TemperatureType>('celsius')

// 温度转换计算属性
const calculatedCelsius = computed(() => {
  if (activeType.value === 'fahrenheit') {
    return Math.round(((fahrenheit.value - 32) * 5 / 9) * 10) / 10
  }
  return celsius.value
})

const calculatedFahrenheit = computed(() => {
  if (activeType.value === 'celsius') {
    return Math.round((celsius.value * 9 / 5 + 32) * 10) / 10
  }
  return fahrenheit.value
})

// 处理输入变化
const handleCelsiusInput = (event: Event) => {
  const target = event.target as HTMLInputElement
  celsius.value = Number(target.value)
  activeType.value = 'celsius'
}

const handleFahrenheitInput = (event: Event) => {
  const target = event.target as HTMLInputElement
  fahrenheit.value = Number(target.value)
  activeType.value = 'fahrenheit'
}

// 快速预设温度
const setTemperature = (c: number) => {
  celsius.value = c
  activeType.value = 'celsius'
}
</script>

<template>
  <div class="card">
    <h2>🏆 作业1｜摄氏 ↔ 华氏 实时转换器</h2>
    
    <div class="temperature-converter">
      <div class="temperature-inputs">
        <div class="input-group">
          <label for="celsius">摄氏温度 (°C)</label>
          <input 
            id="celsius"
            type="number" 
            :value="celsius" 
            @input="handleCelsiusInput"
            step="0.1"
          />
        </div>
        
        <div class="conversion-arrow">↔️</div>
        
        <div class="input-group">
          <label for="fahrenheit">华氏温度 (°F)</label>
          <input 
            id="fahrenheit"
            type="number" 
            :value="fahrenheit" 
            @input="handleFahrenheitInput"
            step="0.1"
          />
        </div>
      </div>
      
      <div class="temperature-display">
        <p>{{ calculatedCelsius }} °C = {{ calculatedFahrenheit }} °F</p>
      </div>
      
      <div class="quick-presets">
        <button @click="setTemperature(0)">❄️ 冰点 (0°C)</button>
        <button @click="setTemperature(25)">🌡️ 室温 (25°C)</button>
        <button @click="setTemperature(100)">🌡️ 沸点 (100°C)</button>
      </div>
      
      <div class="temperature-visual">
        <div class="temp-bar">
          <div 
            class="temp-fill" 
            :style="{ 
              width: Math.min(100, Math.max(0, calculatedCelsius + 50)) + '%',
              backgroundColor: calculatedCelsius > 30 ? '#f44336' : 
                              calculatedCelsius > 10 ? '#ff9800' : '#2196f3'
            }"
          ></div>
        </div>
      </div>
    </div>
    
    <div class="explanation">
      <h4>📝 实现要点</h4>
      <ul>
        <li>使用 ref 存储温度值</li>
        <li>使用 computed 实现双向转换计算</li>
        <li>实时响应输入变化</li>
      </ul>
      <p class="formula">🌡️ 转换公式：°C = (°F - 32) × 5/9 | °F = °C × 9/5 + 32</p>
    </div>
  </div>
</template>

<style scoped>
.temperature-converter {
  margin: 2em 0;
}

.temperature-inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 2em;
}

.input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.input-group label {
  font-weight: bold;
}

.input-group input {
  width: 150px;
  padding: 10px;
  font-size: 1.2em;
  border-radius: 8px;
  border: 1px solid #ccc;
  text-align: center;
}

.conversion-arrow {
  font-size: 2em;
}

.temperature-display {
  font-size: 1.2em;
  margin: 1em 0;
}

.quick-presets {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 1em 0;
}

.temp-bar {
  width: 100%;
  height: 20px;
  background-color: #444;
  border-radius: 10px;
  overflow: hidden;
  margin: 1em 0;
}

.temp-fill {
  height: 100%;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.explanation {
  text-align: left;
  margin-top: 2em;
}

.formula {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 1em;
  border-radius: 8px;
  font-family: monospace;
}
</style>